<template>
	<view style="width: 100%;height: 100%;background-color: #fff;">
		<view style="width: 700rpx;margin: 25rpx;display: flex;flex-direction: column;">
			<view style="width: 100%;color: #ff0000;font-size: 35rpx;font-weight: 700;">新房住宅成交</view>
			<view style="width: 100%;border-radius: 6rpx;display: flex;flex-direction: column;margin-top: 30rpx;">
				<view style="width: 100%;background-color: #f3f3f3;display: flex;flex-direction: row;border-top-left-radius: 6rpx;
				border-top-right-radius: 6rpx;">
					<view v-for="(item,index) in list" style="width: 25%;color: #000;font-weight: 700;font-size: 28rpx;
					padding-top: 20rpx;padding-bottom: 20rpx;text-align: center;
					">
							{{item.name}}
					</view>
				</view>
				
				<view style="width: 100%;display: flex;flex-direction: row;"
				 v-for="(item,index) in shuJulist" :class="(index+1)%2==0?'fangJian_hui':'fangJian_bai'">
					<view  style="width: 25%;color: #000;font-size: 25rpx;
					padding-top: 20rpx;padding-bottom: 20rpx;text-align: center;
					">
							{{item.area}}
					</view>
					<view  style="width: 25%;color: #000;font-size: 25rpx;
					padding-top: 20rpx;padding-bottom: 20rpx;text-align: center;
					">
							{{item.num}}
					</view>
					<view  style="width: 25%;color: #000;font-size: 25rpx;
					padding-top: 20rpx;padding-bottom: 20rpx;text-align: center;
					">
							{{item.extent}}m²
					</view>
					<view  style="width: 25%;color: #000;font-size: 25rpx;
					padding-top: 20rpx;padding-bottom: 20rpx;text-align: center;
					">
							{{item.average}}m²
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	var that;
	export default {
		data() {
			return {
				list: [{
						name: '区域'
					},
					{
						name: '成交套数'
					},
					{
						name: '成交面积'
					},
					{
						name: '套均面积'
					}
				],
				shuJulist:[]
			}
		},
		onLoad() {
			that = this;
			that.getShuJu();
		},
		methods: {
			getShuJu() {
				var url = uni.api.API.informationGetList;
				var parm = {

				}
				uni.api.HTTPREQUEST(url, "get", parm,
					that.getShuJuSuss,
					that.getShuJuFail, 1);
			},
			getShuJuSuss(res) {
				that.shuJulist=res.data;
			},
			getShuJuFail(msg) {
				console.log(msg);
			}
		}

	}
</script>

<style>
	.fangJian_hui{
		background-color: #f3f3f3;
	}
	.fangJian_bai{
		background-color: #ffffff;
	}
</style>